<html lang="en" xml:lang="en"><head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META name="description" content="ImageChooser class"><meta name="content-language" content="en"><link href="rsrc/htmlhelp.css" rel="stylesheet" type="text/css"><title>Web AppBuilder for ArcGIS | Help - ImageChooser</title>
                <script type="text/javascript" language="JavaScript">
                    var pathL  = self.location.pathname.split ("/");
                    var fname = pathL[pathL.length-1];
                    var i = fname.lastIndexOf (".htm");
                    if (i>=0) {
                    fname = fname.substring (0, i)
                    } else {
                    //??
                    }
                    if (self.location.hash) {
				    		      fname = fname + self.location.hash;
						        }
                    self.location.replace ("../index.html#//" + fname);
                </script>
                </head><!--Publication GUID: [GUID-E7D1C130-8F87-4109-8D61-E73A46083F52]--><!--Topic GUID: [GUID-1917AD48-EAD9-46AD-A786-100AF8DC9BC7]--><body><div id="content"><div class="header"><h1>ImageChooser</h1><div id="breadcrumb"></div></div>
<p id="GUID-2B9AEC49-1E90-428F-BDF2-B75298CB32FD">The ImageChooser class allows you to select an image from your local computer, and crop it in Web AppBuilder Developer Edition.</p>
<p id="GUID-386C04EB-55C0-4BD6-BF1A-1C7A971A6ECE">ImageChooser receives the following parameters as constructor arguments:</p>


<div class="block_table" id="TABLE_C5B827153CB34D6B99C0A69FB3E52E6C" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tr purpose="thead"><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-01B30F2D-D0BA-4212-A874-52D2906EA2B8">Property</p></th><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-AE728AD0-2394-488B-9F11-E7F3A53303F2">Description</p></th></tr><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-63FC1CC4-9549-429A-A089-A37F8BE3923E"><span class="usertext">cropImage</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-4ECB4F19-8E46-4582-9839-C83ECD5664DF">Boolean.  Default is true. Determines whether to enable crop image capability. Only applies to Developer Edition.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-7A24D5EB-03A6-4EBD-93E7-F2D5C636CA62"><span class="usertext">displayImg</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-D940F727-2CC3-4D12-B92F-F707C1162D80"> HTML Image Element.  Default is null. An image element previews the  selected image or cropped image.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-CC27193A-8E39-4A30-96A5-980D85DE3347"><span class="usertext"> showSelfImage</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-1344E173-4637-4ABD-B0DD-709846321029"> Boolean. Determines whether to display the selected image or cropped image in ImageChooser itself. If false, set an image element to the displayImg property for preview. </p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-9ED738E6-D000-4EBE-A91D-E52AEC90B23A"><span class="usertext"> defaultSelfImg</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-C1A9355C-7663-4EBD-A730-9F3057904C97"> String.  Sets the src attribute of the self image.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-741A17F2-E6E0-411A-AEEC-3722E4E76EFD"><span class="usertext"> label</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-D3E7FDAD-D3F1-459F-B93F-81E82F9F25D0">String.  When it's set, ImageChooser displays as a button. The label and showSelfImage properties are in  a mutually exclusive relationship.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-6A816ACB-23D6-49DE-B3C1-38E88A4F7211"><span class="usertext"> showTip</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-403E8903-955B-4786-B006-F71C6C0C4B66"> Boolean.  Determines whether to show tips.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-6C0F3B1E-674A-4718-BB6F-2374570A8B8B"><span class="usertext"> goldenWidth</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-FAB9EA90-14DA-456D-A0A0-23B146B8119A"> Number.  Ideal width of the image.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-60332BEE-7A03-4965-919E-32F553FF925C"><span class="usertext"> goldenHeight</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-A6CA3B3D-F5E1-4252-8E21-3776B7563481">Number.  Ideal height of the image. The rate of cropped image uses the rate of goldenWidth/goldenHeight.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-4E5B6A4D-0FA1-48D1-AA10-A7A086F73F43"><span class="usertext"> format</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-BE5F1F89-B41D-4B83-9958-2D6951F36ECD"> String[]. Types of images that can be selected. Currently it only supports image/png,  image/gif, and image/jpeg.</p></td></tr></tbody></table><span class="table_desc"></span></div><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-C772CE03-C7E3-4D8C-ACD8-9F534A8A60DA-web.png" purpose="img" alt="Crop image" title="Crop image"></td></tr></table></div><p id="GUID-CFF96FAB-D213-4AEF-B046-F0AF39EB7C2A"> When  you click <span class="uicontrol">OK</span>, the  ImageChooser  sends a request to the server with the following parameters:</p><div class="block_table" id="TABLE_640F419964C7433AB6AE45CC53B9CBB9" purpose="block_table"><span class="table_title"></span><table class="table"><colgroup width="*"></colgroup><colgroup width="*"></colgroup><tr purpose="thead"><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-4F1AE67C-46D8-43E9-B5D5-CEA88165A8D7">Key</p></th><th class="th" purpose="th" rowspan="1" colspan="1"><p id="GUID-E602CFFD-2456-4296-B940-8AF3214B8D9F">Description</p></th></tr><tbody><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-C0708943-03D3-40AF-8EEF-A854EDEBAC5C"><span class="usertext">imageData</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-4B2E3A17-BCE6-4B82-BDA0-1D6132A247D5">Base64.  The base64 string of the selected image.</p></td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-18EDD38C-8516-47EB-B3D9-792C115D0D50"> <span class="usertext">imageDisplaySize</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-EB15EB0D-7BFF-4F55-992B-2E8790DA7776"> String. The width and height of the image.</p>
<div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-95FA55A3-7520-4C69-A4D0-557307F5536E-web.png" purpose="img" alt="The width and height of the image" title="The width and height of the image"></td></tr></table></div>
</td></tr><tr><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-D176BA71-3631-4A8F-B77D-13AA24ABF044"> <span class="usertext"> cropRectangle</span></p></td><td purpose="entry" rowspan="1" colspan="1"><p id="GUID-3EB9D9BB-DE2D-4AD3-AF07-19BD8383ADF2">String. The width, height, and offset of the crop rectangle to the image.</p><div class="image" purpose="image"><table><tr><td><img class="break" src="03w3/GUID-BC325FAA-BE38-429B-8426-15B665C52477-web.png" purpose="img" alt="The width, height, and offset of the crop rectangle" title="The width, height, and offset of the crop rectangle"></td></tr></table></div></td></tr></tbody></table><span class="table_desc"></span></div><p id="GUID-954FC0A8-B5E5-46E8-8CBA-2D1399448017">Example:</p><div class="codeblock" purpose="codeblock"><div class="codeblockdesc" purpose="codeblockdesc"><p id="GUID-97449411-260C-4E8E-97C0-1000EE4376B8">Send parameters to the server</p></div><div class="highlight"><pre><code><span class="p">{</span>
<span class="nx">cropRectangle</span><span class="o">:</span><span class="err">”</span><span class="nx">data</span><span class="o">:</span><span class="nx">image</span><span class="o">/</span><span class="nx">jpeg</span><span class="p">;</span><span class="nx">base64</span><span class="p">,</span><span class="err">/9j/4AAQSkZJRgABAgEAYAB......”,</span>
<span class="nx">imageDisplaySize</span><span class="o">:</span><span class="err">”</span><span class="mi">611</span><span class="p">,</span><span class="mi">458</span><span class="err">”</span><span class="p">,</span>
<span class="nx">cropRectangle</span><span class="o">:</span><span class="err">”</span><span class="mi">335</span><span class="p">,</span><span class="mi">335</span><span class="p">,</span><span class="mi">97</span><span class="p">,</span><span class="mi">76</span><span class="err">”</span>
<span class="p">}</span>
</code></pre></div>
</div><div class="codeblock" purpose="codeblock"><div class="codeblockdesc" purpose="codeblockdesc"><p id="GUID-71EEC3B4-1946-41F0-9681-E2E943BAA3FC">Success</p></div><div class="highlight"><pre><code><span class="p">{</span>
<span class="nx">success</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">imageData</span><span class="o">:</span><span class="err">”</span><span class="nx">data</span><span class="o">:</span><span class="nx">image</span><span class="o">/</span><span class="nx">jpeg</span><span class="p">;</span><span class="nx">base64</span><span class="p">,</span><span class="err">/9j/4AAQSkZJRgAB....”</span>
<span class="p">}</span>
</code></pre></div>
</div><div class="codeblock" purpose="codeblock"><div class="codeblockdesc" purpose="codeblockdesc"><p id="GUID-FEDC6797-52AA-4124-A0A7-7DA18A4C00C7">Fail</p></div><div class="highlight"><pre><code><span class="p">{</span>
<span class="nx">success</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">message</span><span class="o">:</span> <span class="s1">&#39;unable to complete operations&#39;</span>
<span class="p">}</span>
</code></pre></div>
</div><div class="footer"> Copyright © 1995-2016 Esri. All rights reserved. </div></div></body></html>